{extend name='layout/app' /}

{block name="css"}
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />-->
<link rel="stylesheet" href="__STATIC__/css/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/css/swiper.css">
{/block}

{block name="content"}
    <div id="app">
        {present name='first'}
            <transition name="el-fade-in-linear">
                <div id="enter-info" v-show="show" style="width: calc(100% - 50px);">
                    <div class="title">取件说明</div>
                    <div class="point">
                        <div class="num">一、</div>
                        <div class="info-cont">取件需点击 <a href="index/services/qrcodePay.html"><span class="just-width" style="width: 50px"><img src="__STATIC__/imgs/enter-info_forcode_03.png" alt="" style="width: 50px;"></span></a>，即可生成取件码。</div>
                    </div>
                    <div class="point">
                        <div class="num">二、</div>
                        <div class="info-cont">进站取件前必须出示取件码,扫闸门进站取件。</div>
                    </div>
                    <div class="point">
                        <div class="num">三、</div>
                        <div class="info-cont">出站将包裹和取件码放在出库验证台扫码出站。</div>
                    </div>
                    <div class="point">
                        <div class="num">四、</div>
                        <div class="info-cont">每取一次件可得1积分，5积分+2元可以寄件一次。</div>
                    </div>

                    <el-button type="primary" @click="show = !show">确定</el-button>
                </div>
            </transition>
        {/present}

<!--        <div class="banner">-->
<!--            <img src="__STATIC__/imgs/yizhan-banner_02.jpg" alt="">-->
<!--        </div>-->
            <div style="height: 187px;" class="swiper-container">
                <div class="swiper-wrapper">
                    <!-- 下面是4个不同颜色的轮播滑块 -->
                    <div class="swiper-slide"><a href="#"><img src="/static/imgs/yizhan-banner_02.jpg" alt=""></a></div>
                    {foreach $ads as $ad}
                    <div class="swiper-slide"><a href="{$ad.keywords}" target="_blank"><img src="{$ad.thumbnail}" alt=""></a></div>
                    {/foreach}
                </div>
                <!-- <div style="width" class="swiper-button-prev"></div>左箭头-->
                <!-- <div class="swiper-button-next"></div>右箭头 -->
                <div class="swiper-pagination"></div><!--分页器（就是4个点点）-->
            </div>
            <div class="circle-tab">
<!--            钱包-->
            <div class="tab-wrapper">
                <a href="index/index/wallet.html">
                    <div class="circle circle-wallet"><i class="iconfont icon-i-money"></i></div>
                    <div class="circle-tab-name">我的钱包</div>
                </a>
            </div>
<!--            积分-->
            <div class="tab-wrapper">
                <a href="index/index/star.html">
                    <div class="circle circle-star"><i class="iconfont icon-star"></i></div>
                    <div class="circle-tab-name">我的积分</div>
                </a>
            </div>
<!--            奖品-->
            <div class="tab-wrapper">
                <a href="index/person/mycode.html">
                    <div class="circle circle-coupon"><i class="iconfont  icon-qrcode "></i></div>
                    <div class="circle-tab-name">我的取件码</div>
                </a>
            </div>
<!--            查看快递-->
            <div class="tab-wrapper">
                <a href="index/person/expressCheck.html">
                    <div class="circle circle-truck"><i class="iconfont icon-truck"></i></div>
                    <div class="circle-tab-name">查看物流</div>
                </a>
            </div>
        </div>

        <!--功能选项-->
        <div class="option">
            <div class="divide">
                <div class="title">功能选项</div>
                <div class="h-line"></div>
            </div>
            <div class="option-cont">
<!--                取件码-->
                <div class="option-item">
                    <a href="index/services/qrcodePay.html">
                        <div class="item-bg">
                            <div class="name"><span class="font-red">我要取件</span></div>
                            <div class="item-icon"><img src="__STATIC__/imgs/item-icon_001.png" alt=""></div>
                        </div>
                    </a>
                </div>
<!--                寄件-->
                <div class="option-item marL2">
                    <a href="index/services/send.html">
                        <div class="item-bg">
                            <div class="name">我要寄件</div>
                            <div class="item-icon"><img src="__STATIC__/imgs/item-icon_002.png" alt=""></div>
                        </div>
                    </a>
                </div>
<!--                3元寄件-->
                <div class="option-item">
                    <a href="index/services/sendBy3.html">
                        <div class="item-bg">
                            <div class="name two-yuan"><span class="red-num">2</span>元寄件</div>
                            <div class="item-icon send"><img src="__STATIC__/imgs/item-icon_003.png" alt=""></div>
                        </div>
                    </a>
                </div>
<!--                送货上门-->
                <div class="option-item marL2">
                    <a href="index/services/onsiteService.html">
                        <div class="item-bg">
                            <div class="name">送货上门</div>
                            <div class="item-icon"><img src="__STATIC__/imgs/item-icon_004.png" alt=""></div>
                        </div>
                    </a>
                </div>
<!--                抽奖-->
                <div class="option-item">
                    <a href="index/index/lottery.html">
                        <div class="item-bg">
                            <div class="name">免费抽奖</div>
                            <div class="item-icon"><img src="__STATIC__/imgs/item-icon_005.png" alt="" style="width: 38%;margin-right: 5%"></div>
                        </div>
                    </a>
                </div>
<!--                配送员-->
                <div class="option-item marL2">
                    <a href="/index/sender/index">
                        <div class="item-bg">
                            <div class="name">配送员</div>
                            <div class="item-icon"><img src="__STATIC__/imgs/item-icon_006.png" alt=""></div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
{/block}

{block name='js'}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
                show: true
            },
            created() {
                $('.circle').height($('.circle').width())
                $('.item-icon img').height($('.send img').height())
                $.get('/index/index/updateSendorder', function(res){})
            },
            methods: {
                /*isLogin(e) {
                    if($(e.target).parents('#enter-info').length) {
                        return
                    }
                    $.post('',{isLogin: 0 },function (res) {

                    },'json')
                    // this.$confirm('请先登录', '提示', {
                    //     confirmButtonText: '登录',
                    //     cancelButtonText: '注册',
                    //     type: 'info',
                    //     center: true
                    // }).then(() => {
                    //     window.location.href = 'page/login.html'
                    // }).catch(() => {
                    //     window.location.href = 'page/register.html'
                    // });
                }*/
            }
        });
    </script>
    <script>
        //初始化Swiper
        var mySwiper = new Swiper('.swiper-container', {
            //自动切换
            autoplay: {
            delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
                },
            //前进后退
        navigation: {
            nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
                },
            //分页器
            pagination: {
                el: '.swiper-pagination',
                clickable :true,
            },
            //循环
            loop : true,
            })
    </script>
{/block}